<template>
  <view
    :id="templateId"
    class="fy-tabbar"
  >
    <view class="fy-tabbar__list">
      <view
        v-for="(item,index) in tabList"
        :key="index"
        class="fy-tabbar__item"
        :style="{'flex': (100 / tabList.length) + '%'}"
        @tap="switchTab(index)"
      >

        <view class="icon">
          <view
            :animation="currentTabIndex == index && animationData"
            :style="{'color': currentTabIndex == index ? tintColor : color}"
            class="template__icon tabbar-icon"
            :class="'template__icon-' + (currentTabIndex == index ? item.selectIcon : item.icon)"
            >
            <template>
              <view
                v-if="item.badge"
                class="fy_badge"
                :class="item.badge > 9 && 'fy_badge_pd'"
                :style="{'background-color': badgeBg}"
              >{{item.badge > 999 ? '...' : item.badge}}</view>
              <view
                v-if="item.badgeDot"
                class="fy_badge fy_badge_dot"
                :style="{'background-color': badgeBg}"
              >...</view>
            </template>
          </view>
        </view>
        <view
          class="text"
          :style="{ 'color': currentTabIndex == index ? tintColor : color}"
        >{{item.text}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcon from "@/components/uniIcon/uniIcon";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    uniIcon
  },
  data() {
    return {};
  },
  props: {
    // tabList: {
    //   type: Array,
    //   default() {
    //     return [];
    //   }
    // },
    // currentTabIndex: {
    //   type: [Number, String],
    //   default: 0
    // },
    animationData: {
      type: Object,
      default() {
        return {};
      }
    },

    backgroundColor: {
      type: String,
      default: "#fbfbfb"
    },
    badgeBg: {
      type: String,
      default: "red"
    },
    color: {
      type: String,
      default: "#999999"
    },
    tintColor: {
      type: String,
      default: "#42b983"
    }
  },
  computed: {
    ...mapState("tabbar", ["currentTabIndex", "tabList"])
  },

  methods: {
    switchTab(index) {
      this.$emit("onClick", index, this.tabList);
    }
  }
};
</script>

<style lang="scss" scoped>
.fy-tabbar {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(108rpx + var(--safe-area-inset-bottom));
  background: $theme-panel-bg-color;
  box-shadow: 0 -2rpx 0 0 rgba(204, 204, 204, 0.5);

  &__list {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 12rpx 0;
    justify-content: space-around;
    align-items: flex-start;
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 54rpx;
      height: 54rpx;
      .tabbar-icon.template__icon {
        font-size: 54rpx !important;
      }

      .fy_badge {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20rpx;
        left: 34rpx;
        top: 0;
        min-width: 32rpx;

        max-width: 52rpx;
        min-height: 32rpx;
        border-radius: 32rpx;
        color: $theme-bg-text-color;
        border: 2rpx solid $theme-panel-bg-color;
      }

      .fy_badge.fy_badge_dot {
        max-width: 32rpx;
        max-height: 32rpx;
        overflow: hidden;
      }
      .fy_badge.fy_badge_pd {
        padding: 0 10rpx;
      }
    }

    .text {
      margin-top: 6rpx;
      font-size: $theme-size-smaller-base;
    }
  }
}
</style>